<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title></title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
    <link href="./css/style.css" rel="stylesheet">
    <link href="./css/bootstrap.min.css" rel="stylesheet">
</head>
<body style='background-image: url("./img/jcbj.png"); background-repeat:no-repeat;background-size: 100% 100%;'>
<header id="header" >
    <div class="container d-flex align-items-center justify-content-between">
        <h1 class="logo"><a href="./index.html"><img src="./img/logo.png" alt="logo"></a></h1>
        <nav id="navbar" class="navbar">
            <ul>
                <li><a class="nav-link scrollto" href="./index.html">首页</a></li>
                <li><a class="nav-link scrollto product" href="javascript:void(0)">产品中心</a>
                    <div class="product-popup" style="opacity: 0; display: none;">
                        <div class="cell flex-basis-quarter">
                            <div class="sys-win-product">

                            </div>
                        </div>
                    </div>
                </li>
                <li><a class="nav-link scrollto down" href="javascript:void(0)">免费下载</a>
                    <div class="down-popup" style="opacity: 0; display: none;">
                        <div class="cell flex-basis-quarter">
                            <div class="sys-win">

                            </div>
                        </div>
                    </div>
                </li>
                <li><a class="nav-link scrollto" href="./article.html">专题教程</a></li>
                <li class="gzh">
                    <a href="#follow">关注公众号
                        <div class="gzh-qrcode-popup" style="opacity: 0; display: none;">
                            <img src="" alt="">
                            <p style="color: #333333;margin-top: 4px;">关注灵动公众号</p>
                            <p style="color: #454545;margin-top: -12px">领取福利</p>
                        </div>
                    </a>
                </li>
            </ul>
            <i class="bi bi-list mobile-nav-toggle"></i>
        </nav>

    </div>
</header>
<main id="main" style="margin-top: 125px;">
<div class="c_con02">
    <div class="i_con02_left">
        <ul>
        </ul>
    </div>
    <div class="i_con02_right">
        <div class="cps_title"><span>当前位置><a href="./index.html" style="color: #999999;">灵动工具官网</a>><a href=""  id="categorytitle"></a></span>
            <strong></strong>
        </div>
        <div class="cps_content">
            <div class="i_con02_right_con_gonggao main-list-col">
                <div class="list-main-lists main-lists-lastest">
                  <ul>

                 </ul>
                </div>
                <div class="list-pages listpage-latest">
                    <a href="javascript:" class="pre-page"></a>
                    <div class="pagesin"></div>
                    <a href="javascript:" class="next-page"></a>
                    <a href="javascript:" class="cur-page"></a>
                    <a href="javascript:" class="all-page"></a>
                </div>
            </div>
        </div>
    </div>
</div>

</main>
<footer id="footer">

    <div class="container footer-bottom clearfix">
        <div class="copyright">

        </div>
    </div>
</footer>
<script src="./js/main.js"></script>
<script src="./js/jquery.min.js"></script>
<script>
    // 处理公众号效果
    function guanzhu_gongzhonghao() {
        function show_qrcode() {
            $('.gzh-qrcode-popup').show()
            setTimeout(function () {
                $(' .gzh-qrcode-popup').css('opacity', 1)
            }, 0)
        }
        function hide_qrcode() {
            setTimeout(function () {
                if ($('a[href="#follow"]:hover').length === 0 && $('.gzh-qrcode-popup:hover').length === 0) {
                    $('.gzh-qrcode-popup').hide()
                }
            }, 400)
            $('.gzh-qrcode-popup').css('opacity', 0)
        }
        $('a[href="#follow"]').hover(function () {
            show_qrcode()
        }, function () {
            setTimeout(function () {
                if ($('a[href="#follow"]:hover').length === 0 && $('.gzh-qrcode-popup:hover').length === 0) {
                    hide_qrcode()
                }
            }, 100);
        })

        $('.gzh-qrcode-popup').hover(function () {
            show_qrcode()
        }, function () {
            setTimeout(function () {
                if ($('a[href="#follow"]:hover').length === 0 && $('.gzh-qrcode-popup:hover').length === 0) {
                    hide_qrcode()
                }
            }, 200);
        })
    }
    // 处理下载
    function downsofe() {
        function show_down() {
            $('.down-popup').show()
            setTimeout(function () {
                $(' .down-popup').css('opacity', 1)
            }, 0)
        }
        function hide_down() {
            setTimeout(function () {
                if ( $('.down:hover').length === 0 && $('.down-popup:hover').length === 0) {
                    $('.down-popup').hide()
                }
            }, 400)
            $('.down-popup').css('opacity', 0)
        }
        $('.down').hover(function () {
            show_down()
        }, function () {
            setTimeout(function () {
                if ($('.down:hover').length === 0 && $('.down-popup:hover').length === 0) {
                    hide_down()
                }
            }, 100);
        })
        $('.down-popup').hover(function () {
            show_down()
        }, function () {
            setTimeout(function () {
                if ($('.down:hover').length === 0 && $('.down-popup:hover').length === 0) {
                    hide_down()
                }
            }, 200);
        })
    }
    //产品中心
    function product() {
        function show_product() {
            $('.product-popup').show()
            setTimeout(function () {
                $(' .product-popup').css('opacity', 1)
            }, 0)
        }
        function hide_product() {
            setTimeout(function () {
                if ( $('.product:hover').length === 0 && $('.product-popup:hover').length === 0) {
                    $('.product-popup').hide()
                }
            }, 400)
            $('.product-popup').css('opacity', 0)
        }
        $('.product').hover(function () {
            show_product()
        }, function () {
            setTimeout(function () {
                if ($('.product:hover').length === 0 && $('.product-popup:hover').length === 0) {
                    hide_product()
                }
            }, 100);
        })
        $('.product-popup').hover(function () {
            show_product()
        }, function () {
            setTimeout(function () {
                if ($('.product:hover').length === 0 && $('.product-popup:hover').length === 0) {
                    hide_product()
                }
            }, 200);
        })
    }
    $(document).ready(function () {
        // 公众号
        guanzhu_gongzhonghao()
        downsofe()
        product()
    })

    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return encodeURI(r[2]);
        return null; //返回参数值
    }

    $(document).ready(function(){
        var cid = getUrlParam('cid');
        if(!cid){
            cid = 1;
        }
        var totlePage,totleSize;        //声明变量，总页数totlepage,列表页总新闻条数totleSize
        var curPage = 1;                //设置当前页为curPage=1第一页
        var curPagesize =20;
        getnewsList(curPage,curPagesize,cid);                 //页面加载时，默认获取的是第一页的数据；getNewsList()获取页面数据Ajax的函数；
        $(".listpage-latest .pagesin").on("click","a",function(){      //每页页码，及点击页码相应的跳转；页码需要根据获取的总数据条数计算出来并拼到页面上，所以js事件要用on，一定要用on，不然点击事件没有效果
            $(".main-lists-lastest ul").empty();   //不管到哪一步，点击页码首页得清除那个页面的数据，再加载新的内容进去，所以empty了解一下，我这里用了a标签的rel属性来判断加载
            var rel = $(this).attr("rel");
            curPage = rel;
            // console.log("aaaa"+rel);
            if(rel){
                getnewsList(rel,curPagesize,cid);
                $(this).eq(rel).addClass("active-pages");
            }
        });
        $(".listpage-latest .next-page").click(function(event){   //下一页
            $(".main-lists-lastest ul").empty();
            if(curPage > totlePage-1){   //如果当前页码大于总页码就只加载最后一页，并弹框
                curPage = totlePage;
                //  alert("the last page");
                getnewsList(curPage,curPagesize,cid);
            }else{
                curPage++;
                getnewsList(curPage,curPagesize,cid);
            }
        });
        $(".listpage-latest .pre-page").click(function(event){   //上一页
            $(".main-lists-lastest ul").empty();
            if(curPage < 2){  //如果当前页码小于第一页就只加载第一页，并弹框
                curPage = 1;
                getnewsList(1,curPagesize,cid);
                //  alert("the first page");
            }else{
                curPage--;
                // console.log(curPage);
                // console.log(curPagesize);
                // console.log(cid);
                getnewsList(curPage,curPagesize,cid);
            }
        });
        function getnewsList(page,size,cid){   //Ajax获取新闻列表的数据内容
           // console.log(cid);
            $.ajax({
                type: "GET",
                url: "https://api.nimbleuser.lingdong365.com/index.php/api/web/articleList",
                dataType: "json",
                async:false,
                data: {             //接口参数的设置
                    'p_page': page,
                    'p_size': size,
                    'cid':cid,
                },
                success:function(data){
                    if(data.code == 200) {
                        var setting = data.data.setting;
                        document.title = setting.seo_title;
                        $('meta[name="keywords"]').attr('content',setting.seo_keywords);
                        $('meta[name="description"]').attr('content',setting.seo_description);
                        $('.copyright').html(setting.company+'<a href="https://beian.miit.gov.cn/" >'+setting.beian+'</a>');
                        $('.gzh-qrcode-popup img').attr('src',setting.qrcode_img);

                        var webproduct = data.data.webproduct;
                        var producttitlehtml = '';
                        if(webproduct.length>0){
                            for (var i = 1; i <= webproduct.length; i++) {
                                producttitlehtml += '<p style="display: block; height: 20px;line-height: 20px;"><a class="productlink" href="./productpage.html?id='+webproduct[i-1].id+'" style="color: #333333;font-size: 14px;font-weight: 500;">'+webproduct[i-1].title+'</a></p>';
                            }
                        }
                        $(".sys-win-product").html(producttitlehtml);

                        var webdown = data.data.webdown;
                        var downhtml ='';
                        if(webdown.length>0){
                            for (var i = 1; i <= webdown.length; i++) {
                                downhtml += '<p style="display: block; height: 20px;line-height: 20px;"><a class="downlink" href="'+webdown[i-1].link+'" style="color: #333333;font-size: 14px;font-weight: 500;">'+webdown[i-1].title+'</a></p>';
                            }
                        }
                        $(".sys-win").html(downhtml);

                        var webarticleclass = data.data.webarticleclass;
                        var webarticleclasshtml = '';
                        if(webarticleclass.length>0){
                            for (var o = 1; o <= webarticleclass.length; o++) {
                                webarticleclasshtml += ' <li><a href="./article.html?cid='+webarticleclass[o-1].id+'">'+webarticleclass[o-1].name+'</a></li>';
                            }
                        }
                        $(".i_con02_left ul").html(webarticleclasshtml);

                        var content = data.data.webarticle.data;
                        var cname = data.data.cname;
                        var html = '';
                        var ii = '';
                        if(content.length>0){
                            totleSize = data.data.webarticle.total;
                            totlePage = data.data.webarticle.last_page;  //计算总页数
                            page = curPage;
                            var data = content;
                            var newsarray = [];
                            for (var i = 1; i <= data.length; i++) {
                                newsarray = data[i-1];
                                // console.log(newsarray);
                                var newsdate = newsarray.date;

                                //显示id
                                if(page > 1){
                                    ii = (page-1)*size+i;
                                }else{
                                    ii = i;
                                }
                                html+= '<li><a href="./articlepage.html?id='+newsarray.id+'"><span style="margin-right: 20px">'+ii+'</span>'+newsarray.title+'<span style="margin-left: 20px">'+newsarray.create_time+'</span></a></li>';
                            }
                            // console.log(html);
                            $(".main-lists-lastest ul").html(html);
                            var category = cid;
                            $("#categorytitle").html(cname);
                            $(".cps_title strong").html(cname);
                            $("#categorytitle").attr('href', './article.html?cid='+category);
                        }else{
                            totleSize = 0;
                            totlePage = 0;  //计算总页数
                            page = curPage;
                            html+= '暂无数据';
                        }
                    }else{
                        return false;
                    }
                },
                complete:function(){
                    getPageBar();
                }
            });
        }
        function getPageBar(){
            $(".listpage-latest .pagesin").empty();
            $(".listpage-latest .pre-page").empty();
            $(".listpage-latest .all-page").text("共"+totlePage+"页");
            $(".listpage-latest .cur-page").text("第"+curPage+"页");
            $(".listpage-latest .pre-page").text("上一页");
            $(".listpage-latest .next-page").text("下一页");
            for(var j=1;j<totlePage+1;j++){
                $(".listpage-latest .pagesin").append($('<a href="javascript:" rel='+j+'>'+j+'</a>'));
                if(j == curPage){
                    $(".listpage-latest .pagesin a").eq((j-1)).addClass("active-pages");
                }
            }
        }

    })
</script>
</body>
</html>